<template>
	<div class="case-num">
		<div class="container">
			<div class="title">
				<span>截至 {{ formatDate(caseNumData.modifyTime) }} 全国数据统计</span>
			</div>
		</div>
		<div class="num">
			<ul class="count">
				<li>
					<div class="create-item">
						<span>现存确诊</span>
						<strong style="color:rgb(247,76,49)">
							{{ caseNumData.currentConfirmedCount }}
						</strong>
						<div class="create-count">
							<b>
								较昨日
								<em style="color:rgb(247,76,49)">
									{{ numZore(caseNumData.currentConfirmedIncr) }}
								</em>
							</b>
						</div>
					</div>
				</li>
				<!-- 分界线 -->
				<li>
					<div class="create-item">
						<span>累计治愈</span>
						<strong style="color:rgb(174, 33, 44)">
							{{ caseNumData.curedCount }}
						</strong>
						<div class="create-count">
							<b>
								较昨日
								<em style="color:rgb(174, 33, 44)">
									{{ numZore(caseNumData.curedIncr) }}
								</em>
							</b>
						</div>
					</div>
				</li>
				<!-- 分界线 -->
				<li>
					<div class="create-item">
						<span>现存无症状</span>
						<strong style="color:rgb(40, 183, 163)">
							{{ caseNumData.seriousCount	 }}
						</strong>
						<div class="create-count">
							<b>
								较昨日
								<em style="color:rgb(40, 183, 163)">
									{{ numZore(caseNumData.seriousIncr) }}
								</em>
							</b>
						</div>
					</div>
				</li>
				<!-- 分界线 -->
				<li>
					<div class="create-item">
						<span>累计确诊</span>
						<strong style="color:rgb(247,130,7)">
							{{ caseNumData.confirmedCount }}
						</strong>
						<div class="create-count">
							<b>
								较昨日
								<em style="color:rgb(247, 130, 7)">
									{{ numZore(caseNumData.confirmedIncr) }}
								</em>
							</b>
						</div>
					</div>
				</li>
				<!-- 分界线 -->
				<li>
					<div class="create-item">
						<span>累计死亡</span>
						<strong style="color:#4D5054">
							{{ caseNumData.deadCount }}
						</strong>
						<div class="create-count">
							<b>
								较昨日
								<em style="color:#4D5054">
									{{ numZore(caseNumData.deadIncr) }}
								</em>
							</b>
						</div>
					</div>
				</li>
				<!-- 分界线 -->
				<li>
					<div class="create-item">
						<span>境外输入</span>
						<strong style="color:rgb(162, 90, 78)">
							{{ caseNumData.suspectedCount }}
						</strong>
						<div class="create-count">
							<b>
								较昨日
								<em style="color:rgb(162, 90, 78)">
									{{ numZore(caseNumData.suspectedIncr) }}
								</em>
							</b>
						</div>
					</div>
				</li>
				<!-- 分界线 -->
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		props:{
			caseNumData:{
				type:Object,
				default:function(){
					return {};
				}
			}
		},
		mounted(){
			console.log(this.caseNumData)
		},
		methods:{
			formatDate(data){
				var date = new Date(data);
				var YY = date.getFullYear() + '-';
				var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var DD = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '   ';
				var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var mm = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
				return YY + MM + DD + hh + mm;
			},
			numZore(num){
				return num > 0 ? '+' + num : num;
			}
		}

	}
</script>

<style scoped>
	.case-num{
		padding: 1.5rem;
		background: #fff;
	}
	.container{
		margin: -1.16rem 0 0;
	}
	.title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1rem 0 0.2rem;
	}
	.title span{
		color: #666;
		font-size: .9rem;
	}
	/*.title em{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 1.24rem;
		margin-right: -1.16rem;
		padding: 0 1.08rem;
		color: #666;
		font-style: normal;
		background-color: #f7f7f7;
		border-radius: 1.12rem 0 0 1.12rem;
	}*/

	.num{
		position: relative;
		text-align: center;
		background: #fff;
	}
	.num:after{
		position: absolute;
		top: .4rem;
		left: -0.1rem;
		display: block;
		width: 200%;
		height: 200%;
		border: .15rem solid #ebebeb;
		border-radius: 1rem;
		box-shadow: 0 1.04rem 1.12rem 0 rgba(0 0 0 0.05);
		transform: scale(0.5);
		transform-origin: 0 0;
		content: '';
	}
	.num ul{
		flex-flow: wrap;
		position: relative;
		display: flex;
		margin: 0;
		padding: 1.2rem 0 0;
	}
	.num ul li{
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 33.333%;
		margin: 0.62rem 0;
	}
	.num ul li .create-item{
		position: relative;
		text-align: center;
	}
	.num ul li .create-item .create-count{
		display: flex;
		align-items: center;
		height: 1.12rem;
		color: #666;
		font-weight: 400;
		font-size: 1.09rem;
	}
	.num ul li .create-item .create-count em{
		font-weight: 400;
		font-style: normal;
	}
	.num ul li strong{
		font-weight: 700;
		font-size: 1.3rem;
		line-height: 1.5rem;
	}
	.num ul li span{
		display: block;
		color: #333;
		font-weight: 700;
		font-size: .9rem;
		line-height: 1.15rem;
	}
</style>
